<template>
    <div>
        <el-container class="home-con">
            <!-- 主框架的头部 -->
            <el-header class="home-head">
                <span>*****系统管理平台</span>
                <div>
                    <el-badge style="display: flex; align-items: center; margin-right:7px;">

                    </el-badge>
                    <el-dropdown style="display: flex; align-items: center;">
                        <span class="home-user" style="align-items: center;">用户姓名
                            <i><img
                                    style="width: 40px; height: 40px; margin-right: 5px; margin-left:5px ; border-radius: 1px;" /></i>
                        </span>

                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>个人中心</el-dropdown-item>
                            <el-dropdown-item>设置</el-dropdown-item>
                            <el-dropdown-item>注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container>
                <!-- 导航 -->
                <el-aside style="width: 180px; background-color: #ececec;">
                    <div style="display: flex; justify-content: flex-start; width: 180px;text-align: left;">
                        <el-menu style="background-color: #ececec; width: 180px;">
                            <el-menu-item index="-" @click="$event => goto('/home')">
                                <i class="el-icon-s-home"></i>
                                <span>主页</span>
                            </el-menu-item>
                            <el-submenu index="2-1">
                                <template slot="title"><i class="el-icon-user"></i>人员管理</template>
                                <el-menu-item index="2-1-1" @click="$event => goto('/empList')">
                                    <i class=""></i>
                                    <span>正式员工</span>
                                </el-menu-item>
                                <el-menu-item index="2-1-2" @click="$event => goto('/shi')">
                                    <i></i>
                                    <span>实习生</span>
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item index="3-1" @click="$event => goto('/sys')">
                                <i class="el-icon-setting"></i>
                                <span>系统管理</span>
                            </el-menu-item>
                        </el-menu>
                    </div>
                </el-aside>
                <!-- 工作区域 -->
                <el-main>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item>首页</el-breadcrumb-item>
                        <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
                    </el-breadcrumb>

                    <keep-alive>
                        <router-view v-if="this.$route.meta.keepAlive"></router-view>
                    </keep-alive>
                    <router-view v-if!="this.$route.meta.keepAlive"></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'home',
    data() {
        return {
            router: []
        }
    },
    computed: {
        routes() {
            return ''
        }
    },
    methods: {
        goto(url) {
            console.log(url);
            this.$router.replace(url)
        }
    }
}
</script>
<style scoped> .home-con {
     height: 100px;
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
 }


 .home-head {
     background-color: #20a0ff;
     color: □#333;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: space-between;
     box-sizing: content-box;
     padding: 0px;
 }

 .home-user {
     width: 180px;
     min-width: 175px;
 }
</style>